<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <select name="" id="pro">
        <option value="">请选择</option>
    </select>
    <select name="" id="city">
        <option value="">请选择</option>
    </select>
    <select name="" id="area">
        <option value="">请选择</option>
    </select>

    <script src="../js/ajax.js"></script>

    <script>

        // 1 解决直辖市的问题
        //    判断区下面有没有  list    隐藏区

        // 2 请选择的问题
        //     判断省请选择   市和区都初始化   '请选择'
        //     判断市请选择   区都初始化   '请选择'


        // 3 省二次选择的时候   区要初始化 '请选择'



        ajax({
            path: '../data/city.json',
            type: 'get',
            success: res => {
                console.log(res);
                const { list } = res;
                // 渲染省份
                if (list) {
                    render(list, '#pro');

                    document.querySelector('#pro').onchange = function () {
                        const proVal = this.value;
                        document.querySelector('#area').innerHTML = '<option value="">请选择</option>'
                        // 点击了请选择
                        if (!proVal) {
                            document.querySelector('#city').innerHTML = '<option value="">请选择</option>';
                            // document.querySelector('#area').innerHTML = '<option value="">请选择</option>'
                        } else {
                            // 找到满足条件的数据
                            const res = list.filter(item => item.name === proVal);
                            console.log(res);
                            const cityList = res[0].list;
                            console.log(cityList);
                            if (cityList) {
                                render(cityList, '#city')
                            }


                            // 
                            document.querySelector('#city').onchange = function () {
                                const cityVal = this.value;

                                // 假如点击了请选择
                                if(!cityVal) {
                                    document.querySelector('#area').innerHTML = '<option value="">请选择</option>'
                                } else {
                                    const res = cityList.filter(item => item.name === cityVal);
                                    const areaList = res[0].list;

                                    if (areaList) {
                                        document.querySelector('#area').style.visibility = 'visible';
                                        render(areaList, '#area');
                                    } else {
                                        // alert('err') 
                                        document.querySelector('#area').style.visibility = 'hidden';
                                    }
                                }
                               


                            }
                        }

                    }
                }

            }
        })



        function render(data, ele) {
            // 渲染
            let html = '<option value="">请选择</option>';
            data.forEach(item => {
                html += `<option value="${item.name}">${item.name}</option>`
            })
            document.querySelector(ele).innerHTML = html;

        }

    </script>

</body>

</html>